<template>
  <div class="app-container" style="">
    <div class="search-header">
      <el-form ref="whereform" :model="whereform" label-width="80px" class="form-block">
        <el-form-item label="城市">
          <el-input v-model="whereform.city_name" style="display:block" placeholder="请输入城市名称" />
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-row style="padding:20px">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="add_city_handel">新增城市</el-button>

      </el-row>
      <el-table
        :data="cityData"
        style="width: 100%"
      >
        <el-table-column
          label="城市名称"
          width="220"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="已开通业务"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.business }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="开通时间"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.add_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.r_status }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template>

            <span> -- </span>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding:10px;fl">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[20, 40, 80, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      :visible="add_city_show"
      title="添加城市"
      width="400px"
      top="50px"
      :before-close="handelClose1"
    >
      <el-form :model="cityform">
        <el-form-item label="城市名称">
          <el-select v-model="cityform.code" filterable placeholder="请选择" @change="citySelect">
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="业务选择">
          <el-select v-model="cityform.business" filterable placeholder="请选择">
            <el-option
              v-for="item in businessList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="cityform.status"
          />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="cityform.remark"
            type="textarea"
            placeholder="请输入内容"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
        <el-form-item style="margin-left:40%">
          <el-button type="primary" @click="add_city()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import { city_list, add_city,aysnc_city_list } from '@/api/ctm_bus'

export default {
  data() {
    return {

      add_city_show: false,
      whereform: {
        page: 1,
        limit: 20,
        city_name: ''
      },
      cityform: {
        code: '',
        business: '',
        status: true,
        remark: '',
        name: ''
      },
      total: 0,
      pageSize: 0,
      list: null,
      listLoading: true,
      orderData: [],
      currentPage4: 1,
      cityList: [],
      businessList: [
        {
          value: '1',
          label: '所有业务'
        }
      ],
      cityData: []

    }
  },
  created() {
    this.fetchData(this.whereform)
    this.loadCityList()
  },
  methods: {
    handelClose1() {
      this.add_city_show = false
    },
    citySelect(item) {
      this.cityList.forEach(element => {
        if (element.code === item) {
          this.cityform.name = element.name
        }
      })
    },
    loadCityList(query) {
      city_list().then(res => {
        if (res.code !== 200) return this.$message.error(res.msg)
        this.cityList = res.data
      })
    },
    handleEdit(index, row) {
      return this.$message.error('不可编辑')
      // this.$router.push({ name: 'addCtmLine', params: {
      //   id: row.id
      // }})
    },
    add_city() {
      add_city(this.cityform).then(res => {
        console.log(res)
        if (res.code !== 200) return this.$message.error(res.msg)
        this.add_city_show = false
        this.cityform = {}
         this.fetchData(this.whereform)
        return this.$message.success(res.msg)
      })
    },
    // onSubmit() {
    //   this.fetchData(this.whereform)
    // },
    fetchData(where) {
      this.listLoading = true
      aysnc_city_list(where).then(res => {
        if (res.code !== 200) return this.$message.error(res.msg)
        this.cityData = res.data.data
        this.total = res.data.count
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.whereform.limit = val
      this.fetchData(this.whereform)
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.whereform.page = val
      this.fetchData(this.whereform)
      console.log(`当前页: ${val}`)
    },
    handleDelete(index, row) {
      // delete_pan({ id: row.id }).then(res => {
      //   if (res.code === 200) {
      //     this.fetchData()
      //     this.$message({ showClose: true, message: res.msg, type: 'success' })
      //   } else {
      //     this.$message({ showClose: true, message: res.msg, type: 'error' })
      //   }
      // }).catch(error => { this.$message({ showClose: true, message: error, type: 'error' }) })
    },
    add_city_handel() {
      this.add_city_show = true
    }
  }
}
</script>
<style scoped>
.app-container{
  background:#f0f2f5;
}
.search-header{
  background: #fff;
  padding: 10px 20px;
  margin: 10px 10px;
  display: flex;
}
.form-block {
  display:flex;
  padding: 10px 20px;
  margin: 10px 0;
}
.content{
  margin: 10px 10px;
   background: #fff;

}
</style>
